<template>
    <div style="margin-top: 15px;">
       <el-date-picker
                v-model="input"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                unlink-panels
                value-format="yyyy-MM-dd"
                @change="findDatetimeByOne(input)">
    </el-date-picker>
    <!-- <el-button slot="append" icon="el-icon-search" v-on:click="findDatetime(input)" >查询</el-button> -->
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    sortable
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="basicSalary"
                    label="基础工资"
                    sortable
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="profitBonus"
                    label="业绩加成"
                    sortable
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="salary"
                    label="最终工资"
                    sortable
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="datetime"
                    label="发薪日"
                    sortable
                    width="180">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                input: '',
                select: '请选择',
                tableData: null,
                startTime:'',
                endTime:'',
                wid:'',
            }
        },
        methods:{
            findDatetimeByOne(input){
                const _this = this
                if(input!=null&&input!=0){
                    this.startTime=input[0]
                    this.endTime=input[1]
                    this.$http.get("salary/findDatetimeById?startTime="+this.startTime+"&endTime="+this.endTime+"&wid="+window.sessionStorage.getItem("id")).then((resp)=>{
                        _this.tableData=resp.data
                    });
                }else{
                    this.$http.post("salary/findById",window.sessionStorage.getItem("id")).then(function(resp){
                        _this.tableData=resp.data.data
                    });
                }             
            },

        },
        created(){
            const _this = this
            this.$http.post("salary/findById",window.sessionStorage.getItem("id")).then(function(resp){
                console.log(resp.data.data[0].wid)
                _this.tableData=resp.data.data
            })
        },
    }
</script>

<style>
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    .page{
        float: right;
    }
</style>